<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>订单列表</el-breadcrumb-item>
            </el-breadcrumb>

            <!-- start:状态筛选及搜索 -->
            <div class="y-flex y-flex-between mb16">
                <div class="y-flex">
                    <el-select v-model="statusValue" placeholder="状态筛选" @change="statusValueChange" size="small"
                        class="mr10">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- <el-button icon="el-icon-thumb" @click="importVisable = true" v-if="shop_id == 0"
                        size="small">导入数据</el-button>
                    <el-button icon="el-icon-upload2" @click="exportData" size="small">导出数据</el-button> -->
                </div>
                <div class="y-flex">
                    <el-input placeholder="请输入要搜索的内容" v-model="searchInput" class="search-input" size="small"
                        @keyup.enter.native="search" clearable>
                        <el-select v-model="searchSelect" slot="prepend" placeholder="请选择" class="search-select">
                            <el-option label="订单号" value="orderNumber"></el-option>
                            <el-option label="用户ID" value="userId"></el-option>
                            <el-option label="收货地址" value="userAddr"></el-option>
                            <el-option label="收货电话" value="userTel"></el-option>
                            <el-option label="物流单号" value="wuOrder"></el-option>
                            <el-option label="收货人姓名" value="userName"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                    </el-input>
                    <el-button class="ml8" icon="el-icon-circle-close" @click="refresh" size="small">清空筛选</el-button>
                </div>
            </div>
            <!-- end:状态筛选及搜索 -->

            <!-- start:数据展示 -->
            <el-table :data="tableData" border :header-cell-style="{ background: '#409EFF', color: '#FFF' }"
                height="70vh" @selection-change="tableSelectChange" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>

                <el-table-column prop="orderNumber" label="订单号" width="140" show-overflow-tooltip></el-table-column>

                <el-table-column label="订单日期">
                    <template slot-scope="scope">
                        {{ scope.row.orderDate }}
                    </template>
                </el-table-column>
                <el-table-column label="总金额" width="100">
                    <template slot-scope="scope">
                        {{ scope.row.totalMoney | price2 }}
                    </template>
                </el-table-column>
                <el-table-column label="实付金额" width="100">
                    <template slot-scope="scope">
                        {{ scope.row.realMoney | price2 }}
                    </template>
                </el-table-column>
                <el-table-column label="积分抵扣" width="100">
                    <template slot-scope="scope">
                        {{ scope.row.usedYh }}
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="收件人" width="100"></el-table-column>
                <el-table-column prop="userTel" label="电话"></el-table-column>
                <el-table-column prop="userAddr" label="地址"></el-table-column>
                <el-table-column prop="payWay" label="支付方式"></el-table-column>
                <el-table-column label="状态" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.orderStatus == 0">未支付</el-tag>
                        <el-tag v-else-if="scope.row.orderStatus == 1" type="danger">待发货</el-tag>
                        <el-tag v-else-if="scope.row.orderStatus == 2" type="primary">待收货</el-tag>
                        <el-tag v-else-if="scope.row.orderStatus == 3" type="success">已完成</el-tag>
                        <el-tag v-else-if="scope.row.orderStatus == 4" type="info">已取消</el-tag>
                        <el-tag v-else-if="scope.row.orderStatus == 6" type="warning">特殊处理</el-tag>
                        <el-tag v-else-if="scope.row.orderStatus == 7" type="warning">已退款</el-tag>
                        <el-tag v-else-if="scope.row.orderStatus == 8" type="warning">待使用</el-tag>
                        <el-tag v-else>{{ "未知状态" + scope.row.orderStatus }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-document" size="small" plain
                            @click="openDetailDialog(scope.row)">详情</el-button>
                        <el-button icon="el-icon-takeaway-box" size="small" v-if="scope.row.orderStatus == 1"
                            @click="openSendDialog(scope.row.orderNumber, '0')">发货</el-button>

                        <el-button icon="el-icon-position" size="small" v-if="scope.row.orderStatus == 2"
                            @click="openWuliuDialog(scope.row)">物流</el-button>
                        <!-- <el-button icon="el-icon-document-checked" size="small"
                            v-if="(scope.row.orderStatus == 1 || scope.row.orderStatus == 2)"
                            @click="openRefundDialog(scope.row)">退款</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="y-flex y-flex-end">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNumber" :page-sizes="[50, 100, 200]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <!-- end:数据展示 -->
            <!-- start:订单详情 -->
            <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="660px">
                <div>
                    <div class="order-text">
                        订单编号:<span>{{ userData.orderNumber }}</span>
                        <a v-clipboard:copy="userData.orderNumber" v-clipboard:success="onCopy"
                            v-clipboard:error="onError" class="copy-text">复制</a>
                    </div>
                    <div class="order-text">
                        订单日期:<span>{{ userData.orderDate }}</span>
                    </div>
                    <div class="order-text">
                        支付日期:<span>{{ userData.payDate || '暂无' }}</span>
                    </div>
                    <div class="product-box" v-for="(item, index) in orderData" :key="index">
                        <img :src="`${path}zhenghui/format/${item.formatImg}`" class="product-img" alt="" />
                        <div>
                            <div class="product-title">{{ item.productName }}</div>
                            <div class="product-spec">{{ item.formatName }}</div>
                        </div>
                        <div class="price-line">
                            <div class="price-money">
                                <span class="small-size">￥</span>
                                <span>{{ item.productPrice | price }}</span>.<span class="small-size">{{
                                    item.productPrice | pricedot
                                    }}</span>
                            </div>
                            <div class="price-num">x{{ item.productNum }}</div>
                        </div>
                    </div>
                    <div class="price-right">
                        <span>商品总价:</span>
                        <span class="price-right-num">
                            <span class="small-size">￥</span>
                            <span>{{ userData.totalMoney | price }}</span>.<span class="small-size">{{
                                userData.totalMoney
                                | pricedot
                            }}</span>
                        </span>
                    </div>
                    <div class="price-right">
                        <span>微信实付:</span>
                        <span class="price-right-num">
                            <span class="small-size">￥</span>
                            <span>{{ userData.usedStored | price }}</span>.<span class="small-size">{{
                                userData.usedStored
                                | pricedot
                            }}</span>
                        </span>
                    </div>

                    <div class="price-right">
                        <span>积分抵扣:</span>
                        <span class="price-right-num">

                            <span>{{ userData.usedYh }}</span>
                        </span>
                    </div>

                    <el-table :data="[userData]" :header-cell-style="{ background: '#409EFF', color: '#FFF' }"
                        style="width: 100%">
                        <el-table-column prop="userId" width="80" label="用户ID">
                        </el-table-column>
                        <el-table-column prop="userName" label="收货人">
                        </el-table-column>
                        <el-table-column prop="userTel" label="手机号">
                        </el-table-column>
                        <el-table-column prop="userAddr" label="收货地址">
                        </el-table-column>
                    </el-table>
                    <div class="order-text-style2" v-if="userData.orderStatus == 7">
                        退款原因：<span>{{ userData.returnReason }}</span></div>
                    <div class="order-text-style2" v-if="userData.orderStatus == 7">退款备注：<span>{{
                        userData.returnNote
                        || "无"
                            }}</span></div>
                    <div class="order-text-style2" v-if="userData.orderStatus == 2 || userData.orderStatus == 3">
                        物流公司：<span>{{ userData.wuCompany }}</span></div>
                    <div class="order-text-style2" v-if="userData.orderStatus == 2 || userData.orderStatus == 3">
                        物流单号：<span>{{ userData.wuOrder }}</span></div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="closeDetailDialog">关 闭</el-button>
                </span>
            </el-dialog>
            <!-- end:订单详情 -->
            <!-- start:物流弹窗 -->
            <el-dialog title="物流信息" :visible.sync="wuliuDialogVisible" width="660px">
                <div>
                    <div style="margin-bottom:8px">订单号：{{ wlNum.orderNumber }}
                        <a v-clipboard:copy="wlNum.orderNumber" v-clipboard:success="onCopy" v-clipboard:error="onError"
                            class="copy-text">复制</a>
                    </div>
                    <div style="margin-bottom:8px">物流公司：{{ wlNum.wuCompany }}</div>
                    <div style="margin-bottom:8px">物流单号：{{ wlNum.wuOrder }}
                        <a v-clipboard:copy="wlNum.wuOrder" v-clipboard:success="onCopy" v-clipboard:error="onError"
                            class="copy-text">复制</a>
                    </div>

                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="wuliuDialogVisible = false">关 闭</el-button>
                </span>
            </el-dialog>
            <!-- end:物流弹窗 -->
            <!-- start:发货弹窗 -->
            <el-dialog title="发货" :visible.sync="sendDialogVisible" width="400px">
                <div>
                    <el-form ref="sendFormRef" :model="form" label-width="80px" :rules="rules" class="send-dialog-form">
                        <el-form-item label="订单编号">
                            <el-input v-model="sendOrderNum" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="物流公司" prop="wu_com">
                            <el-select v-model="form.wu_com" style="width:280px;" placeholder="请选择">
                                <el-option value="SF,顺丰" label="顺丰"></el-option>
                                <el-option value="STO,申通" label="申通"></el-option>
                                <el-option value="YTO,圆通" label="圆通"></el-option>
                                <el-option value="YD,韵达" label="韵达"></el-option>
                                <el-option value="HHTT,天天" label="天天"></el-option>
                                <el-option value="EMS,EMS" label="EMS"></el-option>
                                <el-option value="ZTO,中通" label="中通"></el-option>
                                <el-option value="DBL,德邦" label="德邦"></el-option>
                                <el-option value="JD,京东快递" label="京东快递"></el-option>
                                <el-option value="ZJS,宅急送" label="宅急送"></el-option>
                                <el-option value="FEDEX_GJ,Fedex国际" label="Fedex国际"></el-option>
                                <el-option value="UPS,UPS国际快递" label="UPS国际快递"></el-option>
                                <el-option value="SURE,速尔快递" label="速尔快递"></el-option>
                                <el-option value="XFEX,信丰物流" label="信丰物流"></el-option>
                                <el-option value="UC,优速快递" label="优速快递"></el-option>
                                <el-option value="CNPEX,中邮物流" label="中邮物流"></el-option>
                                <el-option value="AAE,AAE全球专递" label="AAE全球专递"></el-option>
                                <el-option value="DHL,DHL" label="DHL"></el-option>
                                <el-option value="FEDEX_GJ,DPEX国际快递" label="DPEX国际快递"></el-option>
                                <el-option value="DSWL,D速物流" label="D速物流"></el-option>
                                <el-option value="FEDEX,FEDEX国内快递" label="FEDEX国内快递"></el-option>
                                <el-option value="OCS,OCS" label="OCS"></el-option>
                                <el-option value="TNT,TNT" label="TNT"></el-option>
                                <el-option value="ycky,远成快运" label="远成快运"></el-option>
                                <el-option value="YZPY,邮政快递" label="邮政快递"></el-option>
                                <el-option value="HTKY,百世快递" label="百世快递"></el-option>
                                <el-option value="JTSD,极兔速递" label="极兔速递"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="物流单号" prop="order_wuliu">
                            <el-input v-model="form.order_wuliu"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeSendDialog">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </span>
            </el-dialog>
            <!-- end:发货弹窗 -->


            <!-- start:退款 -->
            <el-dialog title="退款" :visible.sync="refundDialogVisible" width="450px" :before-close="refundDialogClose">
                <el-form :model="refundText" label-width="110px" ref="refundFormRef">
                    <el-form-item label="退款ID">
                        <el-input type="text" v-model="refundText.transaction_id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="退款金额">
                        <el-input type="text" v-model="refundText.real_sum" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="退款原因" prop="return_reason"
                        :rules="{ required: true, message: '请填写退款原因', trigger: 'change' }">
                        <el-input type="text" v-model="refundText.return_reason"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="text" v-model="refundText.return_note"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="refundDialogClose">取 消</el-button>
                    <el-button type="primary" @click="submitRefundForm">确 定</el-button>
                </span>
            </el-dialog>
            <!-- end:退款 -->


            <!-- 导表弹窗 开始 -->
            <el-dialog title="导入订单列表" :visible.sync="importVisable" width="30%">
                <el-form ref="imporRef" :model="formData" class="send-dialog-form">
                    <el-form-item prop="file" ref="uploadRef" label="导表">
                        <el-upload class="upload-demo" action="aa" :on-remove="fileRemove" :on-change="fileChange"
                            :auto-upload="false" name="file" :limit="1" accept=".xls" ref="addFile">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">*请上传xls文件</div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" style="margin-right: 15px;" @click="importCloseHandle">取消</el-button>
                    <el-button type="primary" @click="submitComment">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 导表弹窗 结束 -->

        </el-card>
    </div>
</template>

<script>
import {
    wuliu,
    updateOrdersDetail,
    shopInfo,
    addSend,
    applayOrder,
    returnO,
    importOrder, shopList,

    listAllOrder,
    orderDetail,
    sendOrder,


} from '../../network/orderList'
import {
    url
} from 'network/request'
export default {
    data() {
        return {

            baseurl: url,
            checkList: [],
            path: url,
            status: '',
            shop_id: '',
            groupStatus: '',
            //筛选订单状态
            statusOptions: [{
                value: '-1',
                label: '全部'
            },
            {
                value: '0',
                label: '待支付'
            },
            {
                value: '1',
                label: '待发货'
            },
            {
                value: '2',
                label: '待收货'
            },
            {
                value: '3',
                label: '已完成'
            },
            {
                value: '4',
                label: '已取消'
            },
            // {
            //     value: '6',
            //     label: '特殊处理'
            // },
            // {
            //     value: '7',
            //     label: '退款'
            // }
            ],
            statusValue: '-1',
            //搜索
            searchInput: '',
            searchSelect: 'orderNumber',
            //数据展示表格
            tableData: [],
            pageNumber: 1,
            total: 400,
            pageSize: 50,
            //订单详情弹窗
            detailDialogVisible: false,
            userData: {},
            orderData: {},
            //物流信息弹窗
            wuliuDialogVisible: false,
            wlNum: '',

            //发货弹窗
            sendDialogVisible: false,
            sendOrderNum: '',
            order_wuliu: '',
            form: {
                order_num: '',
                order_wuliu: '',
                wu_com: ''
            },
            rules: {
                wu_com: [{
                    required: true,
                    message: '请选择物流公司',
                    trigger: 'change'
                }],
                order_wuliu: [{
                    required: true,
                    message: '请输入物流单号',
                    trigger: 'blur'
                }]
            },
            sendPTNum: 0,
            orderForm: {
                mo_ids: '',
                addr_name: '',
                addr_tel: '',
                addr_detail: ''
            },
            sendForm: [],
            //退款
            refundText: {
                transaction_id: '',
                return_reason: '',
                return_note: '',
                real_sum: '',
                shop_id: ''
            },
            refundDialogVisible: false,
            shopList: [],
            importVisable: false,
            formData: {
                datas: '',
            },
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pageSize = val
            this.getOrderByPages()
        },
        handleCurrentChange(val) {
            this.pageNumber = val
            this.getOrderByPages()
        },
        getShopList() {
            shopList({
                shopId: sessionStorage.shop_id,
                flag: 1
            }).then(res => {
                if (res.flag) {
                    this.shopList = res.data;
                    this.getOrderByPages()
                }
            })
        },
        //获取订单列表数据
        getOrderByPages() {
            listAllOrder({
                page: this.pageNumber, //当前页码数
                size: this.pageSize, //每页展示多少项目
                flag: this.statusValue, //订单状态
                shopId: this.shop_id,
                type: "", //搜索类型
                value: "" //搜索内容
            })
                .then(res => {
                    if (res.flag) {
                        this.tableData = res.data.list
                        this.pageNumber = res.data.pageNum
                        this.total = res.data.total
                        this.pageSize = res.data.pageSize
                        // this.changeHandle(this.tableData)
                        console.log(this.tableData);

                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },
        changeHandle(obj) {
            obj.forEach(element => {
                this.shopList.forEach(item => {
                    if (element.shopId == item.shopId) {
                        element.shopName = item.shopName
                    }
                })
            });
        },
        //订单筛选状态变更
        statusValueChange(val) {
            this.statusValue = val
            this.pageNumber = 1
            this.getOrderByPages()
        },
        //搜索
        search() {
            let checkingArr = [
                'orderNumber',
                'userId',
                'wuOrder',
                'userTel'
            ]
            if (checkingArr.indexOf(this.searchSelect) != -1) {
                console.log('执行验证')
                let reg = new RegExp('^[-+]?(([0-9]+)([.]([0-9]+))?|([.]([0-9]+))?)$')
                console.log(this.searchInput)
                let regRes = reg.test(this.searchInput)
                if (!regRes) {
                    return this.$message.error('请输入正确的信息')
                }
                if (this.searchSelect === 'userId') {
                    if (!(this.searchInput * 1 <= 2147483647)) {
                        return this.$message.error('请输入正确的信息')
                    }
                }
                console.log('结果为', regRes)
            }
            if (this.searchInput === '') {
                return this.$message.warning('请输入要搜索的内容')
            }
            this.pageNumber = 1
            listAllOrder({
                page: this.pageNumber, //当前页码数
                size: this.pageSize, //每页展示多少项目
                flag: this.statusValue, //订单状态
                shopId: this.shop_id,
                type: this.searchSelect, //搜索类型
                value: this.searchInput //搜索内容
            })
                .then(res => {
                    if (res.flag) {
                        this.tableData = res.data.list
                        this.pageNumber = res.data.pageNum
                        this.total = res.data.total
                        // this.changeHandle(this.tableData)
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },
        //刷新
        refresh() {
            this.searchInput = ''
            this.searchSelect = 'orderNumber'
            this.statusValue = 'all'
            this.pageNumber = 1
            this.getOrderByPages()
        },
        //打开详情弹窗
        openDetailDialog(rowData) {
            this.userData = rowData;
            orderDetail({
                orderNumber: rowData.orderNumber,
            })
                .then(res => {
                    if (res.flag) {
                        console.log(res.data);
                        this.orderData = res.data
                        this.detailDialogVisible = true
                        console.log(this.userData);
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        },
        //关闭详情弹窗
        closeDetailDialog() {
            this.detailDialogVisible = false
            this.userData = {}
            this.orderData = {}
        },
        //打开发货弹窗
        openSendDialog(order_num, status) {
            this.sendOrderNum = order_num
            this.sendDialogVisible = true
        },
        submitForm() {
            console.log('进来了')
            this.$refs.sendFormRef.validate(valid => {
                if (!valid) return false
                sendOrder({
                    orderNumber: this.sendOrderNum, //订单号
                    wuCode: this.form.wu_com.split(',')[0], //快递公司代号
                    wuOrder: this.form.order_wuliu, //物流单号
                    wuCompany: this.form.wu_com.split(',')[1], //物流公司名字
                })
                    .then(res => {
                        console.log(res);
                        if (res.flag) {
                            this.getOrderByPages() //刷新列表
                            this.$message.success('发货成功')
                        } else {
                            this.$message.error('发货失败')
                        }
                    })
                    .catch(error => {
                        console.log(error)
                    })
                //关闭弹窗
                this.closeSendDialog()
            })
        },
        closeSendDialog() {
            this.$refs.sendFormRef.resetFields();
            this.sendDialogVisible = false
        },
        //打开物流弹窗
        openWuliuDialog(val) {
            this.wlNum = val
            this.wuliuDialogVisible = true

        },
        //打开退款弹窗
        openRefundDialog(row) {
            if (row.transactionId != null) {
                let obj = {
                    transaction_id: row.transactionId,
                    return_reason: '',
                    return_note: '',
                    real_sum: row.realSum,
                    shop_id: row.shopId
                }
                this.refundText = obj
                this.refundDialogVisible = true
            } else {
                this.$message.warning('此订单无法进行退款')
            }
        },
        onCopy(e) {
            // 复制成功
            this.$message({
                message: '复制成功！',
                type: 'success'
            })
        },
        onError(e) {
            // 复制失败
            this.$message({
                message: '复制失败！',
                type: 'error'
            })
        },
        //导出数据
        exportData() {
            if (this.checkList.length === 0) {
                return this.$message.warning('请勾选要导出的数据')
            }
            let moidList = ''
            for (let i = 0; i < this.checkList.length; i++) {
                moidList += this.checkList[i].moId + ','
            }
            window.location.href =
                'https://www.ccclkj.cn:2028/orders/exportOrders?orderIds=' +
                moidList
        },
        tableSelectChange(val) {
            this.checkList = val
        },

        //退款
        refundDialogClose() {
            this.$refs.refundFormRef.resetFields()
            this.refundDialogVisible = false
            this.refundText.transaction_id = ''
            this.refundText.return_reason = ''
            this.refundText.return_note = ''
            this.refundText.real_sum = ''
            this.refundText.shop_id = ''
        },
        //提交退款信息
        submitRefundForm() {
            this.$refs.refundFormRef.validate(valid => {
                console.log(valid)
                if (valid) {
                    console.log(this.refundText)
                    returnO({
                        transaction_id: this.refundText.transaction_id,
                        return_reason: this.refundText.return_reason,
                        return_note: this.refundText.return_note,
                        real_sum: this.refundText.real_sum,
                        shop_id: this.refundText.shop_id,
                        managerName: sessionStorage.manager_name
                    })
                        .then(res => {
                            console.log(res);
                            if (res == '成功') {
                                this.$message.success('退款成功')
                                this.refundDialogClose()
                                this.getOrderByPages()
                            } else {
                                this.$message.warning(res)
                            }
                        })
                        .catch(err => {
                            console.log(err)
                        })
                } else {
                    return false
                }
            })
        },
        fileRemove(file, fileList) {
            this.$refs.addFile.clearFiles();
            this.formData = {
                datas: ""
            };
        },
        fileChange(file, fileList) {
            this.formData.datas = file.raw;
        },
        importCloseHandle() {
            this.$refs.addFile.clearFiles();
            this.formData = {
                datas: ""
            };
            this.importVisable = false
        },
        submitComment() {
            let fd = new FormData();
            fd.append("managerName", sessionStorage.manager_name);
            fd.append("file", this.formData.datas);
            importOrder(fd).then(res => {
                console.log(res);
                if (res.flag) {
                    this.getOrderByPages()
                    this.$message.success('上传成功')
                    this.importCloseHandle()
                } else {
                    this.$message.error("上传失败");
                }
            });
        },
    },
    filters: {
        //实付金额
        price2(val) {
            return '￥' + val.toFixed(2)
        },
        // 订单日期
        orderDate(val) {
            let orderDate = val.toString().split(' ')
            let date = orderDate[0].split('-')
            let dateM = date[0] + '.' + date[1] + '.' + date[2]
            return dateM + '  ' + orderDate[1]
        },
        price(val) {
            let valstr = ((val * 1).toFixed(2) + '').split('.')[0]
            return valstr
        },
        pricedot(val) {
            let valstr = ((val * 1).toFixed(2) + '').split('.')[1]
            return valstr
        },
        wlCompany(val) {
            if (val == '' || val == undefined) {
                return ''
            }
            let arr = [{
                code: 'SF',
                name: '顺丰'
            },
            {
                code: 'STO',
                name: '申通'
            },
            {
                code: 'YTO',
                name: '圆通'
            },
            {
                code: 'YD',
                name: '韵达'
            },
            {
                code: 'HHTT',
                name: '天天'
            },
            {
                code: 'EMS',
                name: 'EMS'
            },
            {
                code: 'ZTO',
                name: '中通'
            },
            {
                code: 'DBL',
                name: '德邦'
            },
            {
                code: 'JD',
                name: '京东快递'
            },
            {
                code: 'ZJS',
                name: '宅急送'
            },
            {
                code: 'FEDEX_GJ',
                name: 'Fedex国际'
            },
            {
                code: 'UPS',
                name: 'UPS国际快递'
            },
            {
                code: 'SURE',
                name: '速尔快递'
            },
            {
                code: 'XFEX',
                name: '信丰物流'
            },
            {
                code: 'UC',
                name: '优速快递'
            },
            {
                code: 'CNPEX',
                name: '中邮物流'
            },
            {
                code: 'AAE',
                name: 'AAE全球专递'
            },
            {
                code: 'DHL',
                name: 'DHL'
            },
            {
                code: 'FEDEX_GJ',
                name: 'DPEX国际快递'
            },
            {
                code: 'DSWL',
                name: 'D速物流'
            },
            {
                code: 'FEDEX',
                name: 'FEDEX国内快递'
            },
            {
                code: 'OCS',
                name: 'OCS'
            },
            {
                code: 'TNT',
                name: 'TNT'
            },
            {
                code: 'ycky',
                name: '远成快运'
            },
            {
                code: 'YZPY',
                name: '邮政快递'
            },
            {
                code: 'HTKY',
                name: '百世快运'
            },
            {
                code: 'JTSD',
                name: '极兔速递'
            }
            ]
            console.log(arr.length)
            let resArr = arr.filter(item => item.code == val)
            return resArr[0].name
        }
    },
    created() {
        this.shop_id = sessionStorage.shop_id
        this.getOrderByPages()
    }
}
</script>

<style scoped>
.y-flex {
    display: flex;
}

.y-flex-between {
    justify-content: space-between;
    align-items: center;
}

.y-flex-end {
    justify-content: flex-end;
}

.search-input {
    width: 460px;
}

.search-select {
    width: 120px;
}

.ml8 {
    margin-left: 8px;
}

.mb16 {
    margin-bottom: 16px;
}

.mr10 {
    margin-right: 10px;
}

.detail-inline-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.detail-inline-text span {
    color: #999;
}

.copy-btn {
    color: #409eff;
    margin-left: 12px;
    cursor: pointer;
}

.product-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    height: 80px;
    padding-left: 92px;
    margin-bottom: 8px;
}

.product-img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 8px;
}

.order-text {
    margin-bottom: 8px;
}

.order-text span {
    color: #999;
    margin-left: 12px;
}

.copy-text {
    color: #409eff;
    margin-left: 12px;
    cursor: pointer;
}

.price-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.product-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.product-spec {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #999;
    height: 20px;
    line-height: 20px;
}

.price-money {
    color: #ff3b14;
}

.price-num {
    font-size: 12px;
    color: #999;
}

.small-size {
    font-size: 12px;
}

.price-right {
    display: flex;
    justify-content: flex-end;
    padding: 4px 0;
}

.price-right-num {
    width: 100px;
    text-align: right;
    color: #ff3b14;
}

.order-text-border {
    border-top: 1px solid #f2f2f2;
    padding-top: 8px;
}

.order-text-style2 {
    font-size: 14px;
    font-weight: bold;
    color: #666;
    margin-top: 8px;
}

.order-text-style2 span {
    font-weight: normal;
    color: #409eff;
}

.wl-time {
    font-size: 14px;
    font-weight: bold;
    color: #666;
    margin-bottom: 4px;
}

.wl-address {
    color: #999;
}

.oil-tag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 18px;
    height: 24px;
    background: #ff8023;
    text-align: center;
    line-height: 24px;
    border-radius: 0 0 10px 10px;
    color: #fff;
    font-size: 12px;
}

.mustbe .el-image {
    width: 100px;
    height: 100px;
    border-radius: 12px;
}

.mustbe {
    position: relative;
    padding-left: 70px;
}

.mustbe-title {
    position: absolute;
    left: 0;
}
</style>
